<template>
	<view class="container">
    <view class="top_box">
      <!-- 顶部的背景 -->
      <view class="top_back" :style="{backgroundColor: topBackColor}">
      </view>
      <!-- 轮播图卡片 -->
      <view class="banner">
        <uni-swiper-dot class="uni-swiper-dot-box" 
        @clickItem=clickItem
        :info="info" 
        :current="current" 
        :mode="mode"
        :dots-styles="dotsStyles" 
        field="content">
          <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
            <swiper-item v-for="(item, index) in info" :key="index">
              <!--              <view class="swiper-item" :class="'swiper-item' + index">
                <text style="color: #fff; font-size: 32px;">{{index+1}}</text>
              </view> -->
              <image :src="item.url"></image>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </view>
    </view>
 
    <view class="group-menu">
        <uni-section title="商品展示" type="line" padding>
          <uni-grid :column="3" :highlight="true" :showBorder="false" @change="changeGoods">
            <uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
              <view class="grid-item-box" style="background-color: #fff;">
                <!-- <uni-icons type="image" :size="30" color="#777" /> -->
                <image :src="item.url" class="img"></image>
                <view> 文本信息 </view>
              </view>
            </uni-grid-item>
          </uni-grid>
        </uni-section>
    </view>
    <view class="group-list">
      <view class="list-title-section">
        <uni-icons type="fire-filled" color="#ff051e" size="24"></uni-icons>
        <text class="list-title">推荐商品</text>
      </view>
      
      <view class="goods-item" v-for="(item,index) in goods" :key="index" @click="goGoodsDetail">
        <uni-row class="demo-uni-row">
          <uni-col :span="12">
            <image :src="item.url" class="goods-img"></image>
          </uni-col>
          <uni-col :span="8">
            <view class="goods-txt">111111</view>
            <view class="goods-txt">{{item.price}}</view>
          </uni-col>
          <uni-col :span="4">
             <uni-icons type="cart" color="#ff051e" size="30"></uni-icons>
          </uni-col>
        </uni-row>
      </view>
      
    </view>
    
    <view class="body_box">
<!--      <view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view> -->
      <text class="intro">详见：</text>
      <uni-link :href="href" :text="href"></uni-link>
      <view>
        <button size="mini" @click="handleLogin">登录</button>
      </view>
      <view>
        <button size="mini" @click="handleRegister">注册</button>
      </view>
    </view>
	</view>
</template>

<script>
  import request from '../../api/request.js'
	export default {
		data() {
			return {
        topBackColor: '',
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A',
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
        current: 0,
        colors: ['#aaffff', '#ffaa00', '#55ff7f'],
        mode: 'round',
        dotsStyles: {},
        swiperDotIndex: 0,
        list: [{
            url: '/static/c1.png',
            text: 'Grid 1',
            badge: '0',
            type: "primary"
          },
          {
            url: '/static/c2.png',
            text: 'Grid 2',
            badge: '1',
            type: "success"
          },
          {
            url: '/static/c3.png',
            text: 'Grid 3',
            badge: '99',
            type: "warning"
          },
          {
            url: '/static/c4.png',
            text: 'Grid 4',
            badge: '2',
            type: "error"
          },
          {
            url: '/static/c5.png',
            text: 'Grid 5'
          },
          {
            url: '/static/c6.png',
            text: 'Grid 6'
          },
          {
            url: '/static/c7.png',
            text: 'Grid 7'
          },
          {
            url: '/static/c8.png',
            text: 'Grid 8'
          },
          {
            url: '/static/c9.png',
            text: 'Grid 9'
          }
        ],
        goods: [{
						colorClass: 'uni-bg-red',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A',
            price: '20.2'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B',
            price: '20.2'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C',
            price: '20.2'
					}
				],
        nvueWidth: 730,
			}
		},
    mounted() {
      console.log('mounted');
      this.topBackColor = this.colors[0];
    },
    onLoad(option) {
      console.log(option)
    },
		methods: {
      change(e) {
        console.log("change swiper")
        this.current = e.detail.current;
        let index = this.current % 3;
        let color = this.colors[index];
        // 切换背景图颜色
        this.topBackColor = color;
      },
      clickItem(e) {
        this.swiperDotIndex = e
      },
      handleLogin() {
        // request.http()
        console.log("handleLogin")
      },
      async handleRegister() {
        const response = await this.$api.register({
          username: '',
          password: '',
        })
        console.log(response);
      },
      changeGoods() {
        uni.switchTab({
        	url: '/pages/cart/index'
        });
      },
      goGoodsDetail() {
        uni.navigateTo({
        	url: '/pages/goods/detail?id=1'
        });
      }
		}
	}
</script>

<style lang="scss">
	.container {
		// padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
  .top_box {
    overflow: hidden;
    margin: 0;
    
    .top_back {
      height: 400upx;
      // background-color: $uni-primary;
    }
    
    .banner {
      text-align: center;
      margin: -295upx 20upx 20upx 20upx;
      // padding: 20upx;
      border-radius: 10upx;
      overflow: hidden;
      
      image {
        border-radius: 10upx;
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .swiper-box {
    height: 280upx;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: #fff;
  }

  .swiper-item0 {
    background-color: #cee1fd;
  }

  .swiper-item1 {
    background-color: #b2cef7;
  }

  .swiper-item2 {
    background-color: #cee1fd;
  }

  // .image {
  // 	width: 750rpx;
  // }

  /* #ifndef APP-NVUE */
  ::v-deep .image img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
  }

  /* #endif */

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      margin: 0 auto;
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
  
   .group-menu {

     .grid-item-box {
       text-align: center;
       .img {
         width: 150upx;
         height: 150upx;
         border-radius: 50%;
         background-color: antiquewhite;
       }
     }
   } 
   
   .group-list {
     .list-title-section {
       display: flex;
       height: 80upx;
       align-items: center;
     }
     .list-title {
       color: #ff051e;
     }
     .goods-item {
       margin: 10upx;
       background: #fff;
       box-shadow: 0 0 5px #e1dcdd;
       border-radius: 10upx;
     }
     .goods-img {
       width: 300upx;
       height: 250upx;
     }
     .goods-txt {
       color: black;
     }
   }
    
  .body_box {
    //
    overflow: hidden;
  }
</style>
